import { reactive, toRefs, Ref } from 'vue'
import { RolesTerrInterfaceType, AllStateType } from '@/store/storeType'
import TreeStore from 'element-plus/es/el-tree/src/model/tree-store'
import { messageBoxFunc } from '@/utils/el-messageBoxFunc'
import getSelectedKeysArr from '@/utils/getSelectedkeysArr'
import { Store } from 'vuex'

export const rolesParams = reactive({
  roleId: 0,
  formData: {
    roleName: '',
    roleDesc: ''
  },
  changeFormData: {
    roleId: '',
    roleName: '',
    roleDesc: ''
  },
  assignTreeObj: {
    treeData: [] as RolesTerrInterfaceType[],
    defaultProps: {
      children: 'children',
      label: 'authName',
    },
    checkedKeysArr: [] as any,
  },
})

const { roleId, formData, changeFormData, assignTreeObj } = toRefs(rolesParams)


// 一行三个按钮事件逻辑
export const rowBtnLogic = (store: Store<AllStateType>, assignDialogObj: any) => {
  // 权限管理按钮
  const showSetRightDialog = (row: any) => {
    roleId.value = row.id || row.roleId
    store.dispatch('rightsModule/getTerrData').then(() => {
      assignTreeObj.value.treeData = store.state.rightsModule.treeData
      assignTreeObj.value.checkedKeysArr = getSelectedKeysArr(row)
      assignDialogObj.assignDialogVisible = true
    })
  }

  // 角色信息编辑按钮和删除按钮逻辑
  const changeDialogObj = reactive({
    changeDialogVisible: false,
    changeHandleClose() {
      changeDialogObj.changeDialogVisible = false
    },
    changeDialogSubmit() {
      changeDialogObj.changeDialogVisible = false
      store.dispatch('rightsModule/putRoles', changeFormData.value)
    },
    rolesChangeClick(row: any) {
      roleId.value = row.id || row.roleId
      const rolesData = store.getters['rightsModule/rolesDataGetters'](roleId.value)
      changeFormData.value.roleId = rolesData.id || rolesData.roleId
      changeFormData.value.roleName = rolesData.roleName
      changeFormData.value.roleDesc = rolesData.roleDesc
      changeDialogObj.changeDialogVisible = true
    },
    rolesDeleteClick(row: any) {
      messageBoxFunc('rightsModule/deleteRoles', store, { roleId: row.id || row.roleId })
    }
  })

  return { showSetRightDialog, changeDialogObj }
}

// 添加角色按钮逻辑
export const addRolesFn = (store: Store<AllStateType>) => {
  const emptyFunc = () => {
    dialogObj.dialogVisible = false
    formData.value.roleDesc = ''
    formData.value.roleName = ''
  }
  const dialogObj = reactive({
    dialogVisible: false,
    handleClose() {
      emptyFunc()
    },
    dialogClose() {
      emptyFunc()
    },
    dialogSubmit() {
      dialogObj.dialogVisible = false
      store.dispatch('rightsModule/postAddRoles', formData.value)
    }
  })

  return { dialogObj }
}

// 权限管理树状组件逻辑
export const treeFunc = (store: Store<AllStateType>, treeRefDom: Ref<TreeStore>) => {
  const assignDialogObj = reactive({
    assignDialogVisible: false,
    assignHandleClose() {
      assignDialogObj.assignDialogVisible = false
      assignTreeObj.value.checkedKeysArr = []
    },
    assignDialogCancel() {
      assignDialogObj.assignDialogVisible = false
      assignTreeObj.value.checkedKeysArr = []
    },
    assignDialogSubmit() {
      if (treeRefDom.value) {
        store.dispatch('rightsModule/postChangeRights', { roleId: roleId.value, data: { rids: [...treeRefDom.value.getCheckedKeys(), ...treeRefDom.value.getHalfCheckedKeys()].join(',') } }).then(() => {
          assignTreeObj.value.checkedKeysArr = []
          store.dispatch('rightsModule/getRolesData')
        })
      }
      assignDialogObj.assignDialogVisible = false
    }
  })

  return { assignDialogObj }
}

// 展开行逻辑和删除标签逻辑
export const expandAndTagsEvents = (store: Store<AllStateType>) => {
  const tagCloseEvent = (tagData: any, row: any) => {
    messageBoxFunc('rightsModule/deleteRolesRights', store, { rolesId: row.id || row.roleId, rightsId: tagData.id })
  }

  const expandChangeEvent = (row: any) => {
    store.commit('rightsModule/setDisabled', row.id || row.roleId)
  }

  return { tagCloseEvent, expandChangeEvent }
}
